<template>
  <!-- 以下的a链接，其实就是路由了，nuxt已经帮我们做好了 当时nuxt并不推荐使用a链接，而是使用他自己的   nuxt-link组件  类似vue的router-link  -->
  <!-- <ul>
      <li><a href="/">HOME</a></li>
      <li><a href="/about">关于我们</a></li>
      <li><a href="/news">新闻</a></li>
  </ul> -->
  <div>
    <ul>
      <li><nuxt-link :to="{name:'index'}"> HOME</nuxt-link></li>
      <!-- params传递参数 -->
      <li><nuxt-link :to="{name:'about',params:{aboutId:3388}}">用户列表</nuxt-link></li>
      <!-- 或者下面的方式，直接跳 -->
      <li><nuxt-link to="/news">新闻</nuxt-link></li>
      <li><nuxt-link to="ansyData">axios获取数据页面</nuxt-link></li>
    </ul>


    <!-- 图片问题 -->
    <!--
      这种引用方法是不用估计相对路径的，“~”就相当于定位到了项目跟目录，这时候你的图片路径就不会出现错误，就算打包也是正常的。

      用Nuxt.js制作完成后，你可以打包成静态文件并放在服务器上，进行运行。
      在终端中输入：npm run generate
      会生成一个dist文件夹，里边就是生产的静态html文件，直接放到服务器端进行运行了。
     -->
    <div><img src="~static/环球都会广场.jpg" alt=""></div>
    <div class="pic">css方式</div>
  </div>
</template>

<script>
// import AppLogo from '~/components/AppLogo.vue'

export default {
  // components: {
  //   AppLogo
  // }
  head(){
    return{
      title:'首页',
      meta:[
        {hid:'567',name:'Keywords',comments:'关键字'},
      ]
    }
  }
}
</script>

<style>
  /* 如果在CSS中引入图片，方法和html中直接引入是一样的，也是用“~”符号引入。 */
  .pic{
    width:200px;
    height:200px;
    background: url('~static/环球都会广场.jpg')
  }
</style>
